<template>
  <div class="box">
    <!-- 左上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="顶板离层监测"
      style="height: 20rem;"
    >
      <!-- 顶板离层监测 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="roof">
          <HerinSelect
            v-model="roofLeft"
            class="herin-select"
            :options="roofAllLeft"
            place-holder=""
            :height="34"
            :width="160"
            :showOptionscount="6"
            @HerinSelectChange="roofFun('left')"
            style="background-color: rgba(255, 255, 255, 0.1)"
          />
          <HerinSelect
            v-model="roofRight"
            class="herin-select"
            :options="roofAllRight"
            place-holder=""
            :height="34"
            :width="160"
            :showOptionscount="6"
            @HerinSelectChange="roofFun('right')"
            style="background-color: rgba(255, 255, 255, 0.1)"
          />
        </div>
        <div class="titleBox">
          <div class="basic-points" v-for="item in basicPoints" :key="item.text">
            <span class="text">{{ item.text }}</span>
            <span class="number" :style="{ color: item.color }">{{ item.number }}</span>
            <span class="unit">{{ item.unit }}</span>
          </div>
        </div>
        <div class="chat" style="height: 192px">
          <LineChart
            :chart-data="lists"
            :text="['深基点', '浅基点']"
            :sText="['深基点', '浅基点']"
            :area="false"
            unit="mm"
            :color="['#00EEF2', '#F5CA02']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 左中box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="应力监测"
      style="height: 320px"
    >
      <div slot="tab" class="MainCoal-box-tab">
        <div
          v-for="(item, ind) in titleTwotab"
          :key="ind"
          :class="['btn', isTwobtn === item ? 'isbtn' : '']"
          @click="clickTwoTitleTab(item)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 应力监测 统计 -->
      <div slot="content" class="MainCoal-box-content" style="height: 260px">
        <div class="sensorSum">
          <p class="sum">{{ isTwobtn }}监测数量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{ segmentCount }}</span
            ><span class="piece">个</span>
          </p>
        </div>
        <div class="chart">
          <HerinSelect
            v-model="segment"
            class="herin-select"
            :options="segmentAll"
            place-holder=""
            :height="34"
            :width="160"
            :showOptionscount="5"
            @HerinSelectChange="segmentFun"
            style="background-color: rgba(255, 255, 255, 0.1)"
          />
          <div class="segment-stress">
            <span class="text">{{ isTwobtn }}应力</span>
            <div class="right">
              <span class="number">{{ segmentRealTimeData }}</span>
              <span class="unit">kN</span>
            </div>
          </div>
        </div>
        <div class="line-chart" style="height: 176px">
          <div class="location">{{ segmentLoc }}</div>
          <LineChart
            :chart-data="stresslists"
            :text="[`${isTwobtn}应力`]"
            :area="false"
            unit="kN"
            :color="['#7F83F7']"
          />
        </div>
      </div>
    </HerinContainer>
    <!-- 左下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="支架监测"
      style="height: 320px"
    >
      <!-- 传感器断电断线检测 统计 -->
      <div slot="content" class="MainCoal-box-content">

        <div class="title3-wrap">
          <span class="text">支架监测数量</span>
          <div class="right">
            <span class="number">{{ bracketCount }}</span>
            <span class="unit">个</span>
          </div>
        </div>

        <div class="search-wrap">
          <HerinSelect
            v-model="brackeType"
            class="herin-select"
            :options="outageOption"
            place-holder=""
            :height="34"
            :width="160"
            :showOptionscount="5"
            @HerinSelectChange="brackeTChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <HerinSelect
            v-model="bracketNumber"
            class="herin-select"
            :options="bracketNumberOptions"
            place-holder=""
            :height="34"
            :width="160"
            :showOptionscount="5"
            @HerinSelectChange="bracketNumberChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
        </div>

        <div class="bracket-line-chart">
          <LineChart
            :chart-data="bracketLineChart"
            :text="['前柱', '后柱', '前探梁', '平衡千斤顶']"
            :sText="['前柱', '后柱', '前探梁', '平衡千斤顶']"
            :area="false"
            unit="Mpa"
            :color="['#5087EC', '#68BBC4', '#58A55C', '#F2BD42']"
          />
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import LineChart from '@/components/chart/line/LineChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
import { getRoofName, getLoc, getChartInfo, getCount, getInfo, getChart, getZCName, getZJCount, getZJChart } from '@/api/item/monitor/mine.js';
import { DataView } from '@antv/data-set';
import { xFormat } from '@/utils/date';

export default {
  components: {
    HerinContainer,
    HerinSelect,
    LineChart
  },
  mounted() {
    this.getRoofName();
    this.getZCName();
    this.getCount();
  },
  data() {
    return {
      // 顶板离层监测 基点数量
      basicPoints: [
        { text: '深基点', number: 0, unit: 'mm', color: '#00FDFF' },
        { text: '浅基点', number: 0, unit: 'mm', color: '#FFD101' }
      ],
      // 支架阻力监测 支架位置 option
      brackeType: '41109综采面',
      outageOption: [
        {
          label: '41109综采面',
          value: '41109综采面'
        }
      ],
      // 支架阻力监测 支架编号 option
      bracketNumber: '支架号100',
      bracketNumberOptions: [
        {
          label: '支架号100',
          value: '支架号100'
        }
      ],
      // 支架监测数量
      bracketCount: 0,
      // 应力监测 位置 option
      segment: '12MN1201222279',
      segmentAll: [
        {
          label: '12MN1201222279',
          value: '12MN1201222279'
        }
      ],
      // 应力监测 监测数量
      segmentCount: 0,
      // 应力监测 位置
      segmentLoc: '距40204工作面0',
      // 应力实时数据
      segmentRealTimeData: 0,
      roofLeft: '40203上09运输',
      roofAllLeft: [
        {
          label: '40203上09运输',
          value: '40203上09运输'
        }
      ],
      roofRight: '34(350mm)',
      roofAllRight: [
        {
          label: '34(350mm)',
          value: '34(350mm)'
        }
      ],
      stresslists: [],
      // 顶板离层监测 折线图数据
      lists: [],
      // 支架阻力监测 折线图数据
      bracketLineChart: [],
      titleTwotab: ['锚杆', '锚索', '钻孔', '区段'],
      isTwobtn: '锚杆'
    };
  },
  methods: {
    // 获取顶板离层 监测区域名称
    async getRoofName() {
      const res = await getRoofName();
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.roofAllLeft = data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.roofLeft = data[0];
        this.getLoc();
      }
    },
    // 获取顶板离层 传感器位置
    async getLoc() {
      const res = await getLoc({ roofName: this.roofLeft });
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.roofAllRight = data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.roofRight = data[0];
        this.getChartInfo();
      }
    },
    // 获取顶板离层 24小时数据
    async getChartInfo() {
      const res = await getChartInfo({ monitorAreaName: this.roofLeft, sensorLoc: this.roofRight });
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.basicPoints[0].number = data.reduce((total, item) => {
          return Number((total + Number(item.y1)).toFixed(2));
        }, 0);
        this.basicPoints[1].number = data.reduce((total, item) => {
          return Number((total + Number(item.y2)).toFixed(2));
        }, 0);
        // 数据转换
        const dv = new DataView().source(data).transform({
          type: 'fold',
          fields: ['y1', 'y2'],
          key: 's',
          value: 'y'
        });
        const snum = { y1: '深基点', y2: '浅基点' };
        this.lists = new DataView().source(dv.rows).transform({
          type: 'map',
          callback(row) {
            row.y = Number(row.y);
            row.s = snum[row.s];
            row.x = xFormat(row.x);
            return row;
          }
        }).rows;
      }
    },
    // 获取应力监测 区段监测数量及区域编号
    async getCount() {
      const res = await getCount({ areaName: this.isTwobtn });
      if (res.status === 200 && res.data.success) {
        const { count, stationList } = res.data.data;
        this.segmentCount = count;
        this.segmentAll = stationList.map(item => {
          return { label: item, value: item };
        });
        this.segment = stationList[0];
        this.getInfo();
        this.getChart();
      }
    },
    // 获取应力监测 实时数据
    async getInfo() {
      const res = await getInfo({ areaName: this.isTwobtn, stationNo: this.segment ?? '' });
      if (res.status === 200 && res.data.success) {
        const { val, loc } = res.data.data;
        this.segmentLoc = loc;
        this.segmentRealTimeData = val ?? 0;
      }
    },
    // 获取应力监测 图表数据
    async getChart() {
      const res = await getChart({ stationNo: this.segment ?? '' });
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.stresslists = data.map(item => {
          return { x: xFormat(item.x), y: Number(item.y), s: `${this.isTwobtn}应力` };
        });
      }
    },
    // 获取支架监测 采面名称
    async getZCName() {
      const res = await getZCName();
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        this.outageOption = data.map(item => {
          return { label: item, value: item };
        });
        this.brackeType = data[0];
        this.getZJCount();
      }
    },
    // 获取支架监测 支架数量和支架号
    async getZJCount() {
      const res = await getZJCount({ areaName: this.brackeType });
      if (res.status === 200 && res.data.success) {
        const { zjCount, cnameList } = res.data.data;
        this.bracketCount = zjCount;
        this.bracketNumberOptions = cnameList.map(item => {
          return { label: item, value: item };
        });
        this.bracketNumber = cnameList[0];
        this.getZJChart();
      }
    },
    // 获取支架监测 近24小时数据
    async getZJChart() {
      const res = await getZJChart({ areaName: this.brackeType, locName: this.bracketNumber });
      if (res.status === 200 && res.data.success) {
        const { data } = res.data;
        // 数据转换
        const dv = new DataView().source(data).transform({
          type: 'fold',
          fields: ['y1', 'y2', 'y3', 'y4'],
          key: 's',
          value: 'y'
        });
        const snum = { y1: '前柱', y2: '后柱', y3: '前探梁', y4: '平衡千斤顶' };
        this.bracketLineChart = new DataView().source(dv.rows).transform({
          type: 'map',
          callback(row) {
            row.y = Number(row.y);
            row.s = snum[row.s];
            row.x = xFormat(row.x);
            return row;
          }
        }).rows;
      }
    },
    // 点击支架监测 支架编号改变
    bracketNumberChange() {
      this.getZJChart();
    },
    // 点击支架监测 支架位置改变
    brackeTChange() {
      this.getZJCount();
    },
    // 点击应力检测区段下拉菜单
    segmentFun() {
      this.getInfo();
      this.getChart();
    },
    // 点击顶板信息下拉菜单
    roofFun(dir) {
      if (dir === 'left') {
        this.getLoc();
      } else {
        this.getChartInfo();
      }
    },
    // 点击应力监测tab
    clickTwoTitleTab(item) {
      if (this.isTwobtn === item) return;
      this.isTwobtn = item;
      this.getCount();
      if (item === '区段') {
        console.log(item);
      } else if (item === '锚索') {
        console.log(item);
      } else if (item === '锚杆') {
        console.log(item);
      } else if (item === '钻孔') {
        console.log(item);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .roof {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
    font-weight: 900;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
  }
  .titleBox {
    display: flex;
    color: #f8f8f8;
    font-size: 14px;
    line-height: .875rem;
    margin-bottom: 10px;
    .basic-points {
      .number {
        font-size: 1rem;
        margin: 0 .3125rem 0 .625rem;
      }
      .unit {
        font-size: .75rem;
        color: #8D8D8D;
      }
      &:nth-of-type(2) {
        margin-left: 3.125rem;
      }
    }
  }
  .search-wrap{
    display: flex;
    height: 34px;
    justify-content: space-between;
  }
  .sensorState {
    margin: 0.625rem 0;
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    font-size: 14px;
    .normal,
    .odd {
      width: 160px;
      height: 40px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        margin: 0 0.625rem 0 0.9375rem;
      }
    }
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.125rem;
    border-radius: 4px;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    padding: 0 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
    img {
      width: 0.875rem;
      height: 0.875rem;
      margin-right: 0.625rem;
    }
    .icon {
      color: rgba(166, 173, 183, 100);
      font-size: 14px;
    }
  }
  .normalRate {
    width: 100%;
    height: 9.75rem;
    display: flex;
    justify-content: center;
  }
  .outageList {
    .cont {
      justify-content: space-between;
      display: flex;
      p {
        align-items: center;
        display: flex;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0;
      }
    }
    .state {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: rgba(173, 173, 173, 100);
    }
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .chart {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: .3125rem 0 0.625rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .segment-stress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 10rem;
      height: 2.125rem;
      background-color: rgba($color: $white, $alpha: 0.05);
      border: .0625rem solid rgba($color: $white, $alpha: 0.1);
      border-radius: .25rem;
      padding: 0 .625rem;
      .text {
        font-size: .875rem;
        color: $light3Grey;
      }
      .number {
        font-size: 1rem;
        color: $cyan;
      }
      .unit {
        color: $darkGrey;
        margin-left: .3125rem;
      }
    }
  }

  .line-chart {
    position: relative;
    .location {
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      font-size: .75rem;
      color: $light2Grey;
      &::before {
        content: '';
        width: .8125rem;
        height: .8125rem;
        background-image: url('~@/assets/img/monitor/icon-6.png');
        background-size: 100% 100%;
        margin-right: .3125rem;
      }
    }
  }

  .title3-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.125rem;
    font-size: .875rem;
    color: $light3Grey;
    background-color: rgba($color: $white, $alpha: 0.1);
    border-radius: .25rem;
    padding: 0 .625rem;
    margin-bottom: .625rem;
    .number {
      font-size: 1rem;
      color: $cyan;
    }
    .unit {
      font-size: .75rem;
      color: $darkGrey;
      margin-left: .3125rem;
    }
  }

  .bracket-line-chart {
    height: 10.75rem;
    margin-top: .625rem;
  }
}
</style>
